<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>托福写作模拟</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts-en.js"></script>
    <style>
        html {
            width: 100%;
            height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            font: 14px/1.5 -apple-system, "San Francisco", "Helvetica Neue", Arial, "Segoe UI", "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft Yahei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", "驿微米黑", SimSun, sans-serif;
        }

        .mosk-head {
            background-image: linear-gradient(-90deg, #7E313B 0, #305589 100%);
            height: 88px;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            text-align: center;
        }
        .tittle{
            font-size: 24px;
            color: white;
        }
        .btn-container{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-items: right;
            justify-content: right;
            align-content: center;
        }

        .container {
            display: flex;
            flex-direction: row;
        }

        .left {
            left: 0;
            width: 50%;
            height: 100%;
            border: 1px black solid;
            overflow-y: auto;
            box-sizing: border-box;
        }

        .right {
            right: 0;
            width: 50%;
            height: 100%;
            border: 1px black solid;
        }

        .left-desc {
            margin: 3px;
            padding: 12px 19px;
            background: #ddd;
            border: 1px solid #999;
            box-sizing: border-box;
            line-height: 18px;
        }

        .left-desc-question {
            line-height: 22px;
            border: 1px solid #999;
            margin: 3px;
            padding: 12px 19px;
        }

        .left-chart {
            width: 100%;
            height: 200px;
        }

        .right-head-tool {
            border: 1px solid #999;
            margin: 3px;
            position: relative;
            padding: 12px 19px;
        }

        .right-words {
            line-height: 22px;
            right: 0;
        }

        .right-textarea {
            padding: 12px 19px;
            position: relative;
            border: 1px solid #999;
        }

        .right-textarea textarea {
            width: 100%;
            min-height: max-content;
            font-size: 24px;
            resize: none;
            border: none;
            outline: none;
        }
    </style>
</head>

<body onselect="return false" onpaste="return false" oncopy="return false;" oncut="return false;">
    <div class="mosk-head">
        <div class="tittle">
            托福写作模拟
        </div>
        <div class="btn-container">
            <button type="button" onclick="containue()">Containue</button>
        </div>
    </div>
    <div class="container">
        <div class="left">
            <div class="left-desc">
                Directions:<br>
                Read the question below. You have <b>30 minutes</b> to plan, write, and revise your essay. Typically, an
                effective response will contain a mininum of 300 words.
            </div>
            <div class="left-desc-question">
                <p class="section"><b>Question:</b></p>
                Do you agree or disagree with the following statement?<br>In the past people ate food that was better
                for their health than they do today.<br>
                Use specific reasons and examples to support your answer.
            </div>
            <div class="left-desc-question">
                <p class="section"><b>Writing Plan:</b></p>
                <p>Disagree</p>
                虽然有食品添加剂但适量无害而且可以使食品营养丰富。
                现代食品对食物处理更到位，成熟的工艺可以使食物更加安全。河豚
                虽然存在非法添加的现象使食品看起来不安全，但我们政府可以通过立法，引进溯源系统加强食品全过成的监督，企业遵守道德和购买时辨别的方式。
            </div>
            <div class="left-chart" id="chart">
            </div>
        </div>

        <div class="right">
            <div class="right-head-tool">
                <div class="right-words">字数： 0 切屏次数：0</div>
            </div>
            <div class="right-textarea">
                <textarea cols=20 rows="19" placeholder="Start your writing here ..." id="input" oninput="wordStatic()"
                    style="ime-mode: disabled;"></textarea>
            </div>
        </div>
    </div>
</body>

<script>
    var blurNum = 0;
    $(window).on('blur resize', function () {
        blurNum++;
        $(".right-words").html("字数: " + length_now + " 切屏次数：" + blurNum);
    });

    $(window).on('beforeunload', function () {
        $(this).off('blur resize');
        return '离开此页面将退出考试!';
    });

    //关闭窗口方法
    function CloseWebPage() {
        if (navigator.userAgent.indexOf("MSIE") > 0) {
            if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
                window.opener = null;
                window.close();
            } else {
                window.open('', '_top');
                window.top.close();
            }
        }
        else if (navigator.userAgent.indexOf("Firefox") > 0) {
            window.location.href = 'about:blank ';
        } else {
            window.opener = null;
            window.open('', '_self', '');
            window.close();
        }
    }
</script>
<script>
    $(document).ready(function () {
        countTime();
        $(document).bind("contextmenu", function (e) {
            return false;
        });
    });
</script>
<script>
    var length_now = 0;
    function wordStatic() {
        // 获取文本框对象
        var el = document.getElementById('input');
        if (el) {
            // 获取输入内容长度并更新到界面
            var value = el.value;
            // 替换中文字符为空格
            value = value.replace(/[\u4e00-\u9fa5]+/g, " ");
            // 将换行符，前后空格不计算为单词数
            value = value.replace(/\n|\r|^\s+|\s+$/gi, "");
            // 多个空格替换成一个空格
            value = value.replace(/\s+/gi, " ");
            // 更新计数
            var length = 0;
            var match = value.match(/\s/g);
            if (match) {
                length = match.length + 1;
            } else if (value) {
                length = 1;
            }
            length_now = length;

        }
        var startMinutes = parseInt(timeLeft / (60 * 1000));
        var startSec = parseInt(timeLeft - (startMinutes * 60 * 1000)) / 1000;
        $(".right-words").html("字数: " + length_now + " 切屏次数：" + blurNum + " 实际用时:" + startMinutes + "分," + startSec + "秒");
        $(".input").val
    }
</script>
<script>
    var myChart = echarts.init(document.getElementById('chart'));
    var timeLeft = 0;
    var pre_input = 0;
    var blurNum_list = new Array();
    var time = new Array();
    var value = new Array();
    var instant_value = new Array();
    function countTime() {
        // console.log(timeLeft);
        
        if (timeLeft % 5000 == 0) {
            let input_now = length_now - pre_input;
            time.push(timeLeft/1000);
            blurNum_list.push(blurNum);
            instant_value.push((input_now / 5000) *60* 1000);
            if(((input_now/5000)*30*60*1000)<300){
                console.log("无法完成！")
                // $(".right-words").html("字数: " + length_now + " 切屏次数：" + blurNum + " 实际用时:" + startMinutes + "分," + startSec + "秒"+" <b>无法完成写作！</b>");
            }
            pre_input = length_now;
            if(timeLeft != 0 ){
                value.push((length_now / timeLeft) *60* 1000);
            }else{
                value.push(0);
            }
            var option = {
                title: {
                text: '打字速度'
                },
                xAxis: {
                    type: 'category',
                    data: time,
                    name:"时间(s)"
                },
                yAxis: {
                    type: 'value',
                    name:"打字速度（words/min）"
                },
                series: [{
                    data: instant_value,
                    type: 'bar'
                    },{
                    data: value,
                    type: 'line'
                },{
                    data: blurNum_list,
                    type: 'line'
                }]
            };
            myChart.setOption(option);
        }

        if (timeLeft == 30 * 60 * 1000) {
            alert("时间到！");
        }
        var startMinutes = parseInt(timeLeft / (60 * 1000));
        var startSec = parseInt(timeLeft - (startMinutes * 60 * 1000)) / 1000;
        $(".right-words").html("字数: " + length_now + " 切屏次数：" + blurNum + " 实际用时:" + startMinutes + "分," + startSec + "秒");
        timeLeft = timeLeft + 1000;
        setTimeout(countTime, 1000);
    }
</script>

</html>